<p-table [value]="items"
  dataKey="Id"
  [loading]="isLoading"
  [rowHover]="true"
  styleClass="p-datatable-sm p-datatable-striped">
  <ng-template pTemplate="caption">
    <div class="flex">
      <button type="button"
        pButton
        pRipple
        icon="pi pi-file"
        class="mr-2"
        [routerLink]="['/scenarios', 'design', 'new']"></button>
      <button type="button"
        pButton
        pRipple
        icon="pi pi-refresh"
        class="p-button-info ml-auto"
        [loading]="isLoading"
        (click)="onRefreshClick()"></button>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th></th>
      <th pSortableColumn="Id">Id <p-sortIcon field="Id"></p-sortIcon></th>
      <th pSortableColumn="Name">Name <p-sortIcon field="Name"></p-sortIcon></th>
      <th pSortableColumn="CreatedOn">CreatedOn <p-sortIcon field="CreatedOn"></p-sortIcon></th>
      <th></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body"
    let-item
    let-expanded="expanded">
    <tr>
      <td></td>
      <td>
        {{item.Id}}
      </td>
      <td>
        {{item.Name}}
      </td>
      <td>
        {{item.CreatedOn}}
      </td>
      <td class="flex">
        <button pButton
          class="ml-2 p-button-sm ml-auto"
          [routerLink]="['/scenarios', 'design', item.Id]">设计</button>
        <button pButton
          class="ml-2 p-button-sm p-button-warning"
          [routerLink]="['/scenarios', 'monitor', item.Id]">操作</button>
        <button pButton
          class="ml-2 p-button-sm p-button-danger"
          (click)="onDeleteClick(item.Id)">删除</button>
      </td>
    </tr>
  </ng-template>
</p-table>

<p-confirmDialog></p-confirmDialog>
<p-toast></p-toast>